<template>
  <pull-to
    :no-more="allLoaded"
    :is-bottom-bounce="false"
    :is-top-bounce="false"
    @infinite-scroll="loadMore"
  >
    <div class="container">
      <my-header :sign-up="isLogin" :login-flag="true" :head-title="location" />
      <div class="banner">
        <mt-swipe :auto="6000">
          <mt-swipe-item v-for="img in slideShow" :key="img.id">
            <img :src="img" alt="" />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="quickMemue">
        <mt-swipe v-if="$store.state.home.indexEntryInfo.length" :auto="0">
          <mt-swipe-item>
            <ul class="flex-ul">
              <li
                v-for="(item, index) in $store.state.home.indexEntryInfo"
                v-show="index < 8"
                :key="item.key"
              >
                <p><img :src="item.iconUrl" /></p>
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </mt-swipe-item>
          <mt-swipe-item>
            <ul class="flex-ul">
              <li
                v-for="(item, index) in $store.state.home.indexEntryInfo"
                v-show="index > 7"
                :key="item.key"
              >
                <p><img :src="item.iconUrl" /></p>
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </mt-swipe-item>
        </mt-swipe>
        <img v-else src="~assets/img/item.svg" />
      </div>
      <p class="nearbyShops">附件商家</p>
      <div v-if="$store.state.home.shopList.length">
        <mall-optimal-list
          v-for="item in $store.state.home.shopList"
          :key="item.key"
          :info="item"
        />
        <div v-if="!allLoaded" class="loading-bar">
          <svg class="icon icon-loading" aria-hidden="true">
            <use xlink:href="#icon-loading"></use>
          </svg>
          加载中...
        </div>
        <p v-else class="no-more">已加载全部</p>
      </div>
      <div v-for="item in 5" v-else :key="item.key">
        <img src="~assets/img/loading.svg" />
      </div>
    </div>
  </pull-to>
</template>

<script>
import MyHeader from '@/components/public/Head'
import MallOptimalList from '@/components/MallOptimalList'
import PullTo from '@/components/public/VuePullTo'

export default {
  layout: 'footer',
  components: {
    MyHeader,
    MallOptimalList,
    PullTo
  },
  data() {
    return {
      isLogin: false,
      location: '广东省深圳市罗湖区京基100商业区', // 定位地址
      slideShow: [
        'https://ganks.oss-cn-shenzhen.aliyuncs.com/img/banner1.jpg',
        'https://ganks.oss-cn-shenzhen.aliyuncs.com/img/banner2.jpg',
        'https://ganks.oss-cn-shenzhen.aliyuncs.com/img/banner3.jpg'
      ],
      allLoaded: false // 为true表示无更多数据
    }
  },
  methods: {
    loadMore: function() {
      // this.currentPage++
      // const params = {
      //   pageSize: 20,
      //   pageIndex: this.currentPage
      // }
      // 商家列表
      // api.shopList(params).then(res => {
      //   this.shopsInfo = this.shopsInfo.concat(this.shopsInfo, res.data || '')
      //   if (res.data.length < 20) {
      //     this.allLoaded = true
      //   }
      // })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "@/assets/css/load-more.css"
.container {
  background #fff
  .banner {
    width 100%
    height 94px
    margin-top 43px
  }

  .banner img {
    width 100%;
    height 100%;
  }
  .quickMemue {
    width 100%
    margin-top 3px
    height 180px
  }
  .flex-ul {
    display flex
    flex-wrap wrap
    width 100%
    height 80px
    font-size 13px
    color #7c7c7c
    background-color #fff
    padding 5px 0
    li {
      flex 0 0 25%
      text-align center
      p {
        height 40px
        line-height 40px
        img {
          width 40px
          height 40px
        }
      }
      span {
        display inline-block
        height 30px
        line-height 30px
      }
    }
  }
  .nearbyShops {
    display inline-block
    margin-top 3px
    width 100%
    height 30px
    line-height 30px
    font-size 15px
    padding-left 10px
    background #fff
    color #000
    border-top 1px solid #f4f4f4
  }
  .no-more {
    font-size 12px
    color #999
    text-align center
    padding-bottom 4px
  }
}
</style>
